<template>
  <div class="price">
    <div class="es">
      <div class="steps">
        <span
          v-for="(item, index) in times"
          @click="checkTime(item, index, 1)"
          :key="index"
          :class="{ on: currentIndex1 === index }"
          >{{ item.name }}</span
        >
      </div>
      <vEcharts title="玉米" color="41, 177, 201" imgUrl="yu" :datas="corn" ref="corn"></vEcharts>
    </div>
    <div class="es">
      <div class="steps">
        <span
          v-for="(item, index) in times"
          @click="checkTime(item, index, 2)"
          :key="index"
          :class="{ on: currentIndex2 === index }"
          >{{ item.name }}</span
        >
      </div>
      <vEcharts title="豆粕" color="255, 194, 34" imgUrl="dou" :datas="bean" ref="bean"></vEcharts>
    </div>
    <div class="es">
      <div class="steps">
        <span
          v-for="(item, index) in times"
          @click="checkTime(item, index, 3)"
          :key="index"
          :class="{ on: currentIndex3 === index }"
          >{{ item.name }}</span
        >
      </div>
      <vEcharts title="菜籽粕" color="41, 177, 201" imgUrl="cai" :datas="food" ref="food"></vEcharts>
    </div>
    <div class="es">
      <div class="steps">
        <span
          v-for="(item, index) in times"
          @click="checkTime(item, index, 4)"
          :key="index"
          :class="{ on: currentIndex4 === index }"
          >{{ item.name }}</span
        >
      </div>
      <vEcharts title="小麦" color="255, 194, 34" imgUrl="mai" :datas="wheat" ref="wheat"></vEcharts>
    </div>
  </div>
</template>
<script>
import vEcharts from '../../components/echarts.vue'
import { postHandle } from '@/api'
import { priceQueryList } from '@/api/record.js'
import dayjs from 'dayjs'
export default {
  components: {
    vEcharts
  },
  data() {
    return {
      times: [
        { name: '7天内', time: '7' },
        { name: '30天内', time: '30' },
        { name: '半年内', time: '180' }
      ],
      currentIndex1: 0,
      currentIndex2: 0,
      currentIndex3: 0,
      currentIndex4: 0,
      corn: [], // 玉米
      bean: [], // 豆粕
      food: [], // 菜籽粕
      wheat: [] // 小麦
    }
  },

  mounted() {
    this.loadEchartsInfo(null, 131, 'corn')
    this.loadEchartsInfo(null, 132, 'bean')
    this.loadEchartsInfo(null, 156, 'food')
    this.loadEchartsInfo(null, 153, 'wheat')
  },
  methods: {
    loadEchartsInfo(startTime, seqno, type) {
      const data = {
        startTime: startTime || this.ShowDate('7'),
        endTime: dayjs().format('YYYYMMDD'),
        seqno
      }
      // postHandle(
      //   '/datamofcom/front/price/pricequotation/priceQueryList?seqno=131&startTime=20211201&endTime=20211231&pageNumber=1&pageSize=10000'
      // ).then((data) => {
      //   this.ALlData = data.data.content
      // })
      priceQueryList(data).then(res => {
        console.log(res)
        this[type] = res.rows

        setTimeout(() => {
          this.$refs[type].drawChart()
        }, 200)
      })
      // postHandle('/datamofcom/front/price/pricequotation/priceQueryList?pageNumber=1&pageSize=1000&startTime=' + startTime + '&endTime=' + data.endTime + '&seqno=' + data.seqno, this.contentObj).then(res => {
      //   console.log(res)
      // })
      // return
    },
    checkTime(item, index, type) {
      const v = this.ShowDate(item.time)
      if (type === 1) {
        this.corn = []
        this.loadEchartsInfo(v, 131, 'corn')
      } else if (type === 2) {
        this.bean = []
        this.loadEchartsInfo(v, 132, 'bean')
      } else if (type === 3) {
        this.food = []
        this.loadEchartsInfo(v, 156, 'food')
      } else {
        this.wheat = []
        this.loadEchartsInfo(v, 153, 'wheat')
      }
      this[`currentIndex${type}`] = index
    },
    ShowDate(date) {
      var num = date
      const n = num
      const d = new Date()
      let year = d.getFullYear()
      let mon = d.getMonth() + 1
      let day = d.getDate()
      if (day <= n) {
        if (mon > 1) {
          mon = mon - 1
        } else {
          year = year - 1
          mon = 12
        }
      }
      d.setDate(d.getDate() - n)
      year = d.getFullYear()
      mon = d.getMonth() + 1
      day = d.getDate()
      const s =
        year +
        (mon < 10 ? 0 + JSON.stringify(mon) : JSON.stringify(mon)) +
        (day < 10 ? 0 + JSON.stringify(day) : JSON.stringify(day))
      return s
    }
  }
}
</script>
<style lang="scss" scoped>
.price {
  padding: 20px 0;
  box-sizing: border-box;
}
.es {
  width: 100%;
  height: 400px;
  background-color: #fff;
  position: relative;
  padding: 10px 0;
  box-sizing: border-box;
  z-index: 1;
  .steps {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    align-items: center;
    z-index: 2;
    span {
      padding: 3px 8px;
      border: 1px solid #dddddd;
      color: #999999;
      box-sizing: border-box;
    }
     span:first-child {
      border-radius: 4px 0px 0px 4px;
    }
    span:last-child {
      border-radius: 0px 4px 4px 0px;
    }
    span.on {
      background-color: #eef5e9;
      color: #579c27;
      border-color: #579c27;
    }
  }
}
</style>
